Reactstrap — Modal Options

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add modals with Reactstrap.

Nested Modals

We can add nested modals with Reactstrap.

For instance, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);
  const [nestedModal, setNestedModal] = useState(false);
  const [closeAll, setCloseAll] = useState(false);

const toggle = () => setModal(!modal);
  const toggleNested = () => {
    setNestedModal(!nestedModal);
    setCloseAll(false);
  };
  const toggleAll = () => {
    setNestedModal(!nestedModal);
    setCloseAll(true);
  };

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor,
          <br />
          <Button color="success" onClick={toggleNested}>
            Show Nested Modal
          </Button>
          <Modal
            isOpen={nestedModal}
            toggle={toggleNested}
            onClosed={closeAll ? toggle : undefined}
          >
            <ModalHeader>Nested Modal title</ModalHeader>
            <ModalBody>
              Suspendisse non augue erat. Nunc nec eleifend ligula.{" "}
            </ModalBody>
            <ModalFooter>
              <Button color="primary" onClick={toggleNested}>
                Done
              </Button>
              <Button color="secondary" onClick={toggleAll}>
                All Done
              </Button>
            </ModalFooter>
          </Modal>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

We have the Modal component inside another Modal component to display our nested modal.

The inner one will show on top of the outer one.

We have states to open and close each modal and we pass that to the isOpen prop.

Modals with Custom Transition Timeouts

The transition duration can change with Reactstrap modals.

For instance,e we write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal
        isOpen={modal}
        modalTransition={{ timeout: 1000 }}
        backdropTransition={{ timeout: 2000 }}
        toggle={toggle}
      >
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor,
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

to change the modal and backdrop transition durations.

modalTransition takes an object with the timeout property to change how long to wait until the modal is displayed.

Likewise, we have the backdropTransition prop that also has the timeout property to change the wait time until when the backdrop is displayed.

All the times are in milliseconds.

Modals with External Button

We can add an external component as the close button for the modal.

All we have to do is to set the external prop of the Modal .

For example, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  const externalCloseBtn = (
    <button
      className="close"
      style={{ position: "absolute", top: "45px", right: "15px" }}
      onClick={toggle}
    >
      x
    </button>
  );

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle} external={externalCloseBtn}>
        <ModalHeader>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor, eu aliquam nulla volutpat sed. Cras velit ex,
          aliquam quis lobortis vel, fermentum at leo. Donec hendrerit, ligula
          in ultricies suscipit, ante justo tempus erat, et cursus odio arcu ac
          lorem.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

to add the external component to the external prop of the modal.

Conclusion

We can change various options of the modal.